<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-04 14:57:09
 * @LastEditors: william
 * @LastEditTime: 2025-10-09 16:51:24
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('public.detail')"
    width="850px"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="1" label="基本信息">
        <el-descriptions
          v-loading="viewLoading"
          :column="2"
          border
          :label-width="140"
        >
          <el-descriptions-item
            :rowspan="2"
            width="200"
            style="height: 100px"
            class-name="nw-descriptions-item"
          >
            <template #label>{{ $t('recipe.recipeImage') }}</template>
            <el-image
              style="width: 100px; height: 100px"
              :src="g_utils.showImg(formData.picturePath)"
              :preview-src-list="[g_utils.showImg(formData.picturePath)]"
              fit="contain"
              show-progress
              preview-teleported
            />
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('recipe.recipeName') }}</template>
            {{ formData.name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>菜谱ID</template>
            {{ formData.id || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>菜系</template>
            {{
              g_options.getOptionText(
                recipeCookStyleOptions,
                formData.cookStyle,
                '--'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>口味</template>
            {{
              g_options.getOptionText(
                recipeTasteOptions,
                formData.tasteStyle,
                '--'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>适用国家</template>
            {{ g_options.getOptionText(countryList, formData.country, '--') }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('recipe.applicDeviceModel') }}</template>
            {{ formData.model || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('recipe.recipeType') }}</template>
            {{
              g_options.getOptionText(
                g_options.recipeTypeOptions,
                formData.type,
                '--'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('recipe.portion') }}</template>
            {{
              g_options.getOptionText(
                recipeWeightOptions,
                formData.cookWeight,
                '--'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('recipe.recipeStatus') }}</template>
            <span>{{
              g_options.getOptionText(
                g_options.recipeStatusOptions,
                formData.status,
                '--'
              )
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>创建人</template>
            {{ formData.createBy || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>{{ $t('public.createTime') }}</template>
            {{ formData.createTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>更新人</template>
            {{ formData.updateBy || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>更新时间</template>
            {{ formData.updateTime || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>菜谱归属</template>
            {{ formData.tenant || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>说明</template>
            {{ formData.description || '--' }}
          </el-descriptions-item>
          <el-descriptions-item width="200">
            <template #label>简介</template>
            {{ formData.introduction || '--' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane name="2" label="食材清单">
        <div class="wrap-title">食材明细</div>
        <BaseTable
          ref="refContentTable"
          v-loading="viewLoading"
          :data="formData.materialList"
          style="margin-top: 10px"
        >
          <TableColumn
            prop="ingredientName"
            label="食材名称"
            :column-width="columnWidthObj.ingredientName"
          />
          <TableColumn
            prop="goal"
            label="所需用量"
            :column-width="columnWidthObj.goal"
          />
          <TableColumn
            prop="processId"
            label="加工方式"
            :column-width="columnWidthObj.processId"
          >
            <template #default="{ row }">
              <span
                :class="
                  g_options.getOptionText(processList, row.processId, '--')
                "
                >{{
                  g_options.getOptionText(processList, row.processId, '--')
                }}</span
              >
            </template>
          </TableColumn>
          <!-- <TableColumn
            prop="boxName"
            label="投放食材盒"
            :column-width="columnWidthObj.boxName"
          /> -->
        </BaseTable>
        <div class="wrap-title">调料明细</div>
        <BaseTable
          ref="refContentTable"
          v-loading="viewLoading"
          :data="formData.seasonList"
          row-key="id"
          style="margin-top: 10px"
        >
          <TableColumn
            prop="ingredientName"
            label="调料名称"
            :column-width="columnWidthObj.ingredientName"
          />
          <TableColumn
            prop="goal"
            label="所需用量"
            :column-width="columnWidthObj.goal"
          />
        </BaseTable>
      </el-tab-pane>
      <el-tab-pane name="3" label="步骤列表">
        <BaseTable
          ref="refContentTable"
          v-loading="viewLoading"
          :data="formData.stepList"
          style="margin-top: 10px"
        >
          <TableColumn
            prop="num"
            label="步骤序号"
            :column-width="columnWidthObj.num"
          >
            <template #default="{ $index }">
              <span>{{ $index + 1 }}</span>
            </template>
          </TableColumn>
          <TableColumn
            prop="name"
            label="步骤内容"
            :maxWidth="280"
            :column-width="columnWidthObj.name"
          />
          <TableColumn
            prop="timeOffset"
            label="步骤时长(秒)"
            :column-width="columnWidthObj.timeOffset"
          />
          <!-- <TableColumn
            prop="ingredientType"
            label="步骤类别"
            :column-width="columnWidthObj.ingredientType"
          />
          <TableColumn
            prop="name"
            label="执行操作"
            :column-width="columnWidthObj.name"
          /> -->
        </BaseTable>
      </el-tab-pane>
      <el-tab-pane name="4" label="烹饪记录">
        <div class="cook-record-container">
          <div class="wrap-title">{{ formData.name }} 烹饪记录</div>
          <!-- <el-dropdown split-button type="primary">
            店面xxxx
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>店面1</el-dropdown-item>
                <el-dropdown-item>店面2</el-dropdown-item>
                <el-dropdown-item>店面3</el-dropdown-item>
                <el-dropdown-item>店面4</el-dropdown-item>
                <el-dropdown-item>店面5</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
        </div>
        <BarChart
          v-if="
            activeName === '4' &&
            chartData.timeList &&
            chartData.timeList.length
          "
          :data="formData.stepList"
          :chart-data="chartData"
        />
        <NoData v-else />
      </el-tab-pane>
      <el-tab-pane name="5" label="修改记录">
        <el-row
          type="flex"
          justify="space-between"
          class="header-filter four-border-blueBg"
        >
          <div class="row-left">
            <DateTimeRange
              v-model="formData.timePeriod"
              class="item"
              picker-type="2"
            />
          </div>
          <div class="row-right">
            <el-button type="primary" @click="handleExport">
              <el-icon size="16px"><i-ep-Download /></el-icon>
              {{ $t('public.export') }}
            </el-button>
          </div>
        </el-row>
        <BaseTable
          ref="refContentTable"
          v-loading="viewLoading"
          :data="formData.dataList"
          row-key="id"
        >
          <TableColumn
            prop="num"
            label="操作时间"
            :column-width="columnWidthObj.num"
          />
          <TableColumn
            prop="name"
            label="操作人员"
            :column-width="columnWidthObj.name"
          />
          <TableColumn
            prop="timeOffset"
            label="操作类型"
            :column-width="columnWidthObj.timeOffset"
          />
          <TableColumn
            prop="ingredientType"
            label="编辑前信息"
            :column-width="columnWidthObj.ingredientType"
          />
          <TableColumn
            prop="name"
            label="编辑后信息"
            :column-width="columnWidthObj.name"
          />
        </BaseTable>
      </el-tab-pane>
      <el-tab-pane name="6" label="评价信息">
        <BaseTable
          ref="refContentTable"
          v-loading="viewLoading"
          :data="formData.dataList"
          row-key="id"
        >
          <TableColumn
            prop="num"
            label="评价时间"
            :column-width="columnWidthObj.num"
          />
          <TableColumn
            prop="name"
            label="评价人"
            :column-width="columnWidthObj.name"
          />
          <TableColumn
            prop="timeOffset"
            label="评价内容"
            :column-width="columnWidthObj.timeOffset"
          />
        </BaseTable>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import BarChart from './BarChart.vue'
// import countries from '@/utils/_countries.js'

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const activeName = ref('1')
const viewLoading = ref(false)
const refContentTable = ref(null)
const formData = ref({
  stepList: [],
  materialList: [],
  seasonList: []
})
const recipeCookStyleOptions = ref([])
const recipeTasteOptions = ref([])
const countryList = ref([])
const recipeWeightOptions = ref([])
const processList = ref([])
const columnWidthObj = ref({})
const chartData = ref({})

onMounted(() => {
  getFormData()
  getDictDropList()
})

const getFormData = () => {
  viewLoading.value = true
  g_api.recipe
    .apiRecipeQueryDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
        // formData.value.country = countries
        //   .getCountrys(formData.value.country.split(','))
        //   .join(',')
        formData.value.materialList = data.stepList
          .filter(item => {
            return item.ingredientType === 'material'
          })
          .flatMap(item => (item.materialList ? item.materialList : item))
        formData.value.seasonList = data.stepList.filter(item => {
          return item.ingredientType === 'flavour'
        })
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const getDictDropList = _ => {
  g_api.recipe
    .apiDictDropList({
      dictType: 'cook_style'
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        recipeCookStyleOptions.value = data
      }
    })
  g_api.recipe
    .apiDictDropList({
      dictType: 'taste_style'
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        recipeTasteOptions.value = data
      }
    })
  g_api.recipe
    .apiDictDropList({
      dictType: 'country'
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        countryList.value = data
      }
    })
  g_api.recipe
    .apiDictDropList({
      dictType: 'cook_weight'
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        recipeWeightOptions.value = data
      }
    })
  g_api.foodstuff.apiProcessDropList().then(({ code, data }) => {
    if (code === '200' && data) {
      processList.value = data.map(item => ({
        ...item,
        value: item.id,
        label: item.name
      }))
    }
  })
}

const getCookRecordList = () => {
  viewLoading.value = true
  g_api.recipe
    .apiRecipeQueryCookCountStatData({
      id: formData.value.id
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        chartData.value = data
      }
    })
    .finally(_ => {
      viewLoading.value = false
    })
}

const handleClick = (tab, event) => {
  console.log(tab.paneName, event)
  if (tab.paneName === '4') {
    getCookRecordList()
  }
}

const handleExport = _ => {
  //
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.el-tabs {
  max-height: calc(100vh - 172px);
  :deep(.el-tabs__content) {
    overflow-y: auto;
  }
}
:deep(.nw-descriptions-item) {
  line-height: 0 !important;
}
.wrap-title {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-333);
  text-align: center;

  &:before {
    content: '';
    width: 4px;
    height: 20px;
    margin-right: 10px;
    background: var(--color-primary-green);
    border-radius: 4px;
  }
}

.title {
  margin: 0;
}
.cook-record-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
